<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>通用企业站</title>
    <!-- link标签加上common属性 将全局使用 -->
    <link rel="stylesheet" common href="/layui/css/layui.css">
    <link rel="stylesheet" href="/index.css">
    <script src="/layui/layui.js"></script>
    <script>
        // 配置
        layui.config({
            base: "/model/",
        }).use(["app", "kbElement"], function () {
            let app = layui.app
            let kbElement = layui.kbElement

            //渲染
            app.render({
                main: "home",// 默认渲染首页
                view: "main-view",//渲染main-view标签
                mode: "hash", // 路由模式 history 或者 hash
                route: "/route.json", // 路由链接
            })

        })
    </script>
</head>

<body>
    <!-- 头部 -->
    <div class="kb-header kb-bg-white">
        <div class="layui-container">
            <div class="kb-header-logo">
                <img src="/images/logo.png" alt="kb-header-logo">
            </div>
            <div class="kb-header-nav">
                <ul class="layui-nav kb-bg-white layui-bg-gray">
                    <li class="layui-nav-item layui-this">
                        <a href="javascript:;" onclick="layui.app.navigateTo('home')">首页</a>
                    </li>
                    <li class="layui-nav-item">
                        <a href="javascript:;" onclick="layui.app.navigateTo('goods')">产品中心</a>
                    </li>
                    <li class="layui-nav-item">
                        <a href="javascript:;" onclick="layui.app.navigateTo('news')">新闻中心</a>
                    </li>
                    <li class="layui-nav-item">
                        <a href="javascript:;" onclick="layui.app.navigateTo('about')">关于我们</a>
                    </li>
                </ul>
                <div class="kb-header-menu">
                    <a href="javascript:;" class="layui-icon layui-icon-more-vertical"></a>
                </div>
            </div>
        </div>
    </div>
    <!-- 头部占位 -->
    <div class="kb-header-placeholder"></div>
    <!-- 内容 -->
    <main-view></main-view>
    <!-- 底部 -->
    <div class="kb-footer layui-bg-black">
        <div class="layui-container">
            <div class="kb-footer-left">
                <div class="kb-footer-qrcode">
                    <img src="/images/qr_code.jpg" alt="qr_code">
                </div>
                <div class="kb-footer-contact">
                    <p>电话：400-000-0000</p>
                    <p>服务时间：周一到周五早8:00到晚5:00</p>
                    <p>邮箱：xxx@163.com</p>
                    <p>地址：公司地址</p>
                </div>
            </div>
            <div class="kb-footer-right">
                <ul class="blogroll">
                    <li>
                        <a href="javascript:;" onclick="layui.app.navigateTo('home')">首页</a>
                    </li>
                    <li>
                        <a href="javascript:;" onclick="layui.app.navigateTo('goods')">产品中心</a>
                    </li>
                    <li>
                        <a href="javascript:;" onclick="layui.app.navigateTo('news')">新闻中心</a>
                    </li>
                    <li>
                        <a href="javascript:;" onclick="layui.app.navigateTo('about')">关于我们</a>
                    </li>
                </ul>
                <a href="https://beian.miit.gov.cn/" target="_blank">Copyright © 公司版权所有粤ICP备123456789号</a>
            </div>
        </div>
    </div>
    <script>
        layui.use(["jquery", "dropdown"], function () {
            let $ = layui.$
            let dropdown = layui.dropdown

            dropdown.render({
                elem: '.kb-header-menu',
                content: $(".kb-header .layui-nav").html(),
                className: 'layui-nav kb-bg-white layui-bg-gray',
                style: "position: absolute;display: flex;flex-direction: column;",
                ready: function (elemPanel, elem) {
                    $(elem).css("transform", "rotate(-90deg)");
                },
                close: function (elem) {
                    $(elem).css("transform", "rotate(0deg)");
                }
            });
        })
    </script>
</body>

</html>